<template>
  <div id="is">
    <div id="map"></div>
    <ul ref="pop_con" class="popup">
      <li v-for="(value, key) in popObj" :key="value.adcode">
        <span style="color: #666">{{ key }}:</span>
        <span style="color: deepskyblue">{{ value }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
// 均可：
// import * as L from 'leaflet'
import L from "leaflet";
import { onMounted, reactive, ref } from "vue";
const popObj = ref({
  adcode: 0,
  name: 0,
  level: 0,
});
let popup = null;
const pop_con = ref();
// console.log(pop_con);
// console.log(L)
// var url =
// "https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA";
let url1 =
  "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=fab8a855064198c99f53bc2f3762faa4";
let url2 =
  "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=fab8a855064198c99f53bc2f3762faa4";
let layer1 = L.tileLayer(url1, {
  //设置地图不连续显示
  noWrap: true,
  // 设置图层显示范围
  bounds: [
    [-90, -180],
    [90, 180],
  ],
});
let layer2 = L.tileLayer(url2, {
  //设置地图不连续显示
  noWrap: true,
  // 设置图层显示范围
  bounds: [
    [-90, -180],
    [90, 180],
  ],
});
onMounted(() => {
  const map = L.map("map", {
    layers: [layer1, layer2],
    center: [30.5, 114.3],
    zoom: 8,
  });
  // console.log(map);// NewClass{}
  // console.log(layer);// NewClass{}
  let gis_url = "https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json";
  $.ajax({
    url: gis_url,
  }).then((data) => {
    var wuhan_layer = L.geoJSON(data);
    map.addLayer(wuhan_layer);
    const wuhan_layers = wuhan_layer.getLayers();
    wuhan_layers.forEach((item) => {
      // 鼠标移入
      item.on("mouseover", (evt) => {
        item.setStyle({
          color: "red",
        });
        let maxcoor = [-91, 0];
        item.feature.geometry.coordinates[0][0].forEach((item) => {
          maxcoor = item[1] > maxcoor[0] ? [item[1], item[0]] : maxcoor;
        });
        popObj.value = {
          adcode: item.feature.properties.adcode,
          name: item.feature.properties.name,
          level: item.feature.properties.level,
        };
        // evt.layer.bindPopup('<h1>5</h1>').openPopup()
        // evt.layer.bindPopup(pop_con.value).openPopup();
        popup = L.popup({
          closeOnClick: false,
          offset: L.point(0, 0),
        })
          .setLatLng(L.latLng(...maxcoor))
          // .setLatLng(evt.latlng)
          .setContent(pop_con.value)
          // .openOn(map);
          .openOn(wuhan_layer);
      });
      // 鼠标移出
      item.on("mouseout", (evt) => {
        wuhan_layer.setStyle({
          color: "#338FFF",
        });
        // map.closePopup(popup);
        // wuhan_layer.closePopup(popup);
        wuhan_layer.closePopup();
        // popup.close();
        popup = null;
      });
    });
  });
});
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
<style>
.leaflet-popup-close-button {
  display: none;
}
</style>
